<template>
<div class="attachment-management-container">
  <div class="main-box">
    <el-tabs style="margin-top:20px;" v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title" :name="item.name">
        {{item.content}}
      </el-tab-pane>
    </el-tabs>
    <div class="radio-list">
      <el-radio-group v-model="radio2">
        <el-radio :label="3">FTP服务器</el-radio>
        <el-radio :label="6">阿里云OSS<i class="tip">推荐，快速稳定</i></el-radio>
        <el-radio :label="9">七牛云存储<i class="tip">推荐，快速稳定</i></el-radio>
        <el-radio :label="12">腾讯云存储<i class="tip">推荐，快速稳定</i></el-radio>
      </el-radio-group>
    </div>
    <el-form ref="form" :model="form" label-width="280px">
      <el-form-item label="Access Key">
        <el-input type="input" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="Access Key Secret">
        <el-input type="input" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="Bucket选择">
        <el-input type="input" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="自定义URL">
        <el-input type="input" v-model="form.desc"></el-input>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" ref="orderTable" :data="tableData" :row-key="getRowKeys" style="width: 100%" border="true" @selection-change="dataListSelectionChange">
            <el-table-column label="变量标题" min-width="10">
              <template slot-scope="scope">
                <span>2</span>
              </template>
            </el-table-column>
            <el-table-column label="变量值" min-width="25">
              <template slot-scope="scope">
                <span>默认组</span>
              </template>
            </el-table-column>
            <el-table-column label="变量名" min-width="30">
              <template slot-scope="scope">
                <span>admin</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="save-list">
            <el-button type="button"></el-button>
          </div>
  </div>
</div>
</template>

<script>
import DropdownMenu from '@/components/Share/dropdownMenu'

export default {
  name: 'Documentation',
  components: {
    DropdownMenu
  },
  data() {
    return {
      form: {
        desc: ''
      },
      editableTabsValue: '2',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      editableTabs: [{
        title: '全局设置',
        name: '1'
      }, {
        title: '远程附件',
        name: '2'
      }],
      tabIndex: 2
    }
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        const newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        const tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.attachment-management-container {
  .main-box {
    height: 400px;
    margin: 20px;
  }
}
</style>
